<template>
	<view class="container">
		<view class="warp u-m-t-20">

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-gap :bg-color="bgColor" :height="height" :required="required"></u-gap>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="地域" prop="region">
					<!-- <u-input type="select" :select-open="selectShowDy" v-model="form.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowDy = true"></u-input> -->
					 <view style="width:100%;text-align: right;" @click="cityActive = true">{{form.region || "请选择"}}</view>
				</u-form-item>				
				
				<!-- <u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="发布对象" prop="lb">
					 <view style="width:100%;text-align: right;" @click="sfSelect">{{form.sf || "请选择"}}</view>
				</u-form-item> -->
				
				<u-form-item v-if="form.sf == '团队'" class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
				 label="团队身份" prop="grsf">
					<view style="width:100%;text-align: right;" @click="cgSelect">{{form.grsf || "请选择"}}</view>
				</u-form-item>
				<u-form-item v-else class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
				 label="导师身份" prop="grsf">
					<view style="width:100%;text-align: right;" @click="cgSelect">{{form.grsf || "请选择"}}</view>
				</u-form-item>
				<!-- 		<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 label="打赏金额" prop="rs">
					<u-input :border="border" placeholder="请输入" v-model="form.dsje" type="text" input-align="right"></u-input>
				</u-form-item> -->

			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select :default-value="defaultValue" v-model="selectShowDy" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			<u-select mode="single-column" :list="fetchDict.type_identity" v-model="selectShowFwnr" @confirm="selectConfirmFwnr"></u-select>
			<block v-if="form.sf == '团队'">
				<TriTree ref="cgTree" :multiple="false" :range="fetchDict.group_type" @confirm="function (e){return setChooseType(e,'grsf')}"></TriTree>
			</block>
			<block v-else>
				<TriTree ref="cgTree" :multiple="false" :range="fetchDict.company_type" @confirm="function (e){return setChooseType(e,'grsf')}"></TriTree>
			</block>
			<TriTree ref="sfTree"  :range="fetchDict.type_identity" @confirm="function (e){return setChooseType(e,'sf')}"></TriTree>
		<city-select v-model="cityActive" @city-change="cityChange"></city-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	import TriTree from '@/components/tki-tree/tki-tree.vue'
	import citySelect from '@/components/u-city-select.vue';
	export default {
		components: {
			citySelect,
			TriTree
		},
		data() {
			let that = this;
			return {
				cityActive: false,
				listCitys:[],
				defaultValue:[3],
				selectShowDy:false,
				selectShowFwnr: false,
				specialtyKey: '',
				specialtyShow: false,
				rangKey: 'pname',
				specialtyList: [],
				model: {
					demand: {}
				},
				form: {},
				fetchDict: [],
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				btnType: 'primary',
				reqBody: {},
				rules: {},
				required: false,
				border: false,
				check: false,
				selectShowFwnr: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				url: ''
			};
		},
		mounted() {},
		onShow() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.row) {
				this.model = JSON.parse(decodeURIComponent(options.row));
			}
			
			if (options.type) {
				this.url = JSON.parse(decodeURIComponent(options.type));
			}
			this.dictionaryFetchDict('type_identity'); //身份类型
			this.dictionaryFetchDict('company_type'); //企业类型		
			this.dictionaryFetchDict('group_type'); //企业类型		
			this.cityList();
		},
		methods: {				
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.form.region = address
			},
			sfSelect() {
				this.$refs.sfTree._show()
			},
			setChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()
			},
			confirmCity(e) {
				this.form.region = '';
				e.map((val, index) => {
					this.form.region += this.form.region == '' ? val.label : '-' + val.label;
				})
			},		
			cgSelect() {
				this.$refs.cgTree._show()
			},
			async cityList() {
				let result = await this.$apis.fetchArea({level:2});	
				this.listCitys = result.data;
			},
			confirm(e, list, type) {
				if (type == 'specialty') {
					this.form[type] = list[e][this.rangKey];
					var specialtyKey = e[0];
					this.specialtyKey = specialtyKey;
				} else if (type == 'userIdentify') {
					var itemKey = e[0];
					this.form[type] = list[itemKey]['name'];
				} else {
					var itemKey = e[0];
					this.form[type] = list[itemKey];
				}
				console.log("model:", this.form);
			},
			// 选择
			selectConfirmFwnr(e) {
				this.form.sf = '';
				e.map((val, index) => {
					this.form.sf += this.form.sf == '' ? val.label : '-' + val.label;
				});
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.dictGroup({
					dictCode: keyWords
				});
				this.fetchDict[keyWords] = result.data.reverse();
				this.$forceUpdate()
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.zzqk == undefined) {
							this.form.zzqk = '';
						}
						this.model.intention = this.form;
						var model = encodeURIComponent(JSON.stringify(this.model));
						if (this.url != '') {
							uni.redirectTo({
								url: '/pages/' + this.url + '?row=' + model
							})
						}
					} else {
						console.log('验证失败');
					}
				});

			}
		}
	};
</script>
<style scoped lang="scss">
	// 上下滑动
	.scroll-Y {
		height: 300rpx;

		.scroll-view-item {
			height: 300rpx;
			width: 100%;
		}
	}

	// 左右滑动
	.scroll-view_H {
		height: 400rpx;
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		border: 1px #007aff solid;

		.scroll-view-item_H {
			height: 300rpx;
			width: 40%;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;
		}
	}

	page {
		// background: #f5f5f9;
	}

	.warp {
		background: #fff;
	}

	.count {
		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 145rpx auto 65rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.wdztc {
		width: 190rpx;
		height: 56rpx;
		background: rgba(171, 97, 255, 0.15);
		border: 2rpx dashed #AB61FF;
		border-radius: 6rpx;
		color: #AB61FF;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
		margin-top: 40rpx;
		margin-left: 280rpx;
	}

	.qtsm {
		display: flex;
		align-items: center;

		.hz {
			color: #0D1D36;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
